<template>
    <div>
        <el-container style="height: 100vh;">
            <el-header
                style="background-color: #333; color: #fff; text-align: center; font-size: 24px; line-height: 60px;">
                CRM系统
            </el-header>
            <el-main>
                <el-card class="login-container" shadow="hover">
                    <div class="login-title">登录</div>
                    <el-form ref="user" :model="user" :rules="loginRules" class="login-form">
                        <el-form-item prop="username">
                            <el-input v-model="user.username" placeholder="用户名"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input type="password" v-model="user.password" placeholder="密码"></el-input>
                        </el-form-item>
                        <el-form-item prop="captcha">
                            <el-input v-model="user.captcha" placeholder="验证码"></el-input>
                            <img :src="captchaImage" @click="refreshCaptcha" class="captcha-image" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleLogin('/cust')" style="width: 100%;">登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { generateCaptcha, drawCaptcha } from '@/utils/captcha';
import axios from 'axios';

export default {
    data() {
        return {
            user: {
                username: '',
                password: '',
                captcha: ''
            },
            loginRules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
            },
            captchaText: '',
            captchaImage: ''
        };
    },
    created() {
        this.refreshCaptcha();
    },
    methods: {
        refreshCaptcha() {
            this.captchaText = generateCaptcha();
            this.captchaImage = drawCaptcha(this.captchaText);
        },
        handleLogin(item) {
            this.$refs.user.validate((valid) => {
                if (valid) {
                    if (this.user.captcha.toLowerCase() !== this.captchaText.toLowerCase()) {
                        this.$message.error('验证码不正确');
                        this.refreshCaptcha();
                        return;
                    }
                    //alert("登录请求: 用户名 " + this.user.username + "，密码 " + this.user.password);
                    // 在实际应用中，您应该发送请求到后端API进行验证，并处理登录成功或失败的逻辑
                    axios.post('/api/user/login', this.user)
                        .then(response => {
                            //console.log(response.data);
                            if (response.data.success == true) {
                                const token = response.data.data.token;
                                const user_id = response.data.data.user_id;
                                localStorage.setItem('jwtToken', token);
                                localStorage.setItem('user_id',user_id)
                                
                                this.$store.commit('setid',response.data.data.user_id)
                                if (item != this.$route.path) {
                                    this.$router.push(item);
                                }
                            } else {
                                this.$message.error('账号或密码不正确');
                            }
                        })
                        .catch(error => {
                            // 登录失败逻辑
                            this.$message.error('登录失败');
                            // 处理登录失败的逻辑，例如提示用户登录失败信息
                        });
                    
                } else {

                    return false;
                }
            });
        }
    }
};
</script>

<style scoped>
.el-header {
    background-color: #333;
    color: #fff;
    text-align: center;
    font-size: 24px;
    line-height: 60px;
}

.login-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
}

.login-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.login-form {
    width: 100%;
}

.captcha-image {
    cursor: pointer;
    margin-top: 10px;
}
</style>